<template>
  <b-page class="hdgl-edit" :loading="!loading">
    <a-steps
      :current="step"
      status="wait"
      type="navigation"
      size="small"
      :style="stepStyle">
      <a-step title="基础设置">
        <span slot="icon"/>
      </a-step>
      <a-step title="裂变海报">
        <span slot="icon"/>
      </a-step>
      <a-step title="活动阶梯奖励">
        <span slot="icon"/>
      </a-step>
      <a-step title="裂变文案">
        <span slot="icon"/>
      </a-step>
    </a-steps>
    <div class="hdgl-edit-step-list">
      <hdgl-edit-step1 v-if="visible" ref="step0" :model="model" v-show="step===0"/>
      <hdgl-edit-step2 v-if="visible" ref="step1" :model="model" v-show="step===1"/>
      <hdgl-edit-step3 v-if="visible" ref="step2" :model="model" v-show="step===2"/>
      <hdgl-edit-step4 v-if="visible" ref="step3" :model="model" v-show="step===3"/>
    </div>
    <div class="operator-btn-list">
      <div class="operator-btn-content">
        <b-button
          type="primary"
          v-if="step>0"
          btnContent="上一页"
          @click="prev"/>
        <b-button
          type="default"
          ghost="default"
          btnContent="取消"
          style="margin: 0 8px"
          @click="back"/>
        <b-button
          type="primary"
          btnContent="保存"
          v-if="step===3"
          @click="save"/>
        <b-button
          type="primary"
          v-if="step<3"
          btnContent="下一页"
          @click="next">
        </b-button>
      </div>
    </div>
  </b-page>
</template>

<script>
  import HdglEditStep1 from './sub/hdgl-edit-step-1'
  import HdglEditStep2 from './sub/hdgl-edit-step-2'
  import HdglEditStep3 from './sub/hdgl-edit-step-3'
  import HdglEditStep4 from './sub/hdgl-edit-step-4'
  // import { funDate } from '../../../utils'
  import API from '../../../../api/common'

  export default {
    name: 'HdglEdit',
    components: {
      HdglEditStep2,
      HdglEditStep3,
      HdglEditStep4,
      HdglEditStep1
    },
    data () {
      return {
        stepStyle: {
          marginBottom: '35px',
          boxShadow: '0px -1px 0 0 #D9D9D9 inset',
          width: '470px'
        },
        saveLoading: false,
        step: 0,
        stepLength: 4,
        visible: false,
        msgReward: '<p>恭喜您,[昵称]支持你了，您已成功解锁工具包！<br/>添加小助手微信，回复【XX】，即可领取！<br/>再邀请[邀请人数]位好友关注，<br/>可领取营销人必备的XXXX实体书一本哦～</p>',
        finishMsg: '<p>您好！您的好友[昵称]支持你了！<br/>您已获得[已完成任务量]个好友的支持<br/>恭喜您完成任务！</p>',
        msgReceiveHelp: '你已获得[已完成任务量]个好友的支持<br/>还差[未完成任务量]个好友支持，即可获得奖励</p>',
        receiveHelpMsg: '<p>您好！您的好友[昵称]支持你了！<br/>',
        msgUnfollow: '<p>哎呀，您的好友[昵称]刚刚取消关注了，<br/>该好友助力失效啦，<br/>只差[未完成任务量]位好友就能领取工具包啦，<br/>赶快去邀请更多好友助力吧！</p>',
        msgAfterFinish: '<p>任务已完成！您的好友[昵称]又支持你了<br/>人气值+1<br/>目前已有[已完成任务量]人支持你！</p>',
        msgOver: '<p>本次活动已经结束了，感谢您的参与<br/>添加小助手微信：985563224<br/>可免费领取&ldquo;感恩大礼包&rdquo;一份</p>',
        msgRepeat: '<p>啊哦，您是我们的老朋友啦，快去邀请更多好友助力吧！</p>',
        msgKeywordReply: '<p>哈喽[昵称]，您已成功参与xx活动<br/>' +
          '分享下方海报，<br/>' +
          '邀请【3】位好友助力并添加xx老师微信，可获得xx<br/>' +
          '邀请【5】位好友助力并添加xx老师微信，可获得xx<br/>' +
          '<br/>' +
          '奖品限量XX份，已有XX人领取<br/>' +
          '快去分享你的专属海报</p>',
        msgJoin: '<p>hello~[昵称]，您已为好友助力成功~ <br/>' +
          '转发下方你的专属海报 <br/>' +
          ' <br/>' +
          '邀请【3】位好友助力并添加xx老师微信，可获得xx<br/>' +
          '邀请【5】位好友助力并添加xx老师微信，可获得xx<br/>' +
          '<br/>' +
          '奖品限量XX份，已有XX人领取<br/>' +
          '快去分享你的专属海报</p>',
        model: {},
        msgGuideQw: '<p>哈喽[昵称]，添加下方XX老师微信，即可为好友成功助力哦～<br/>' +
          '添加好友后，还能一起参与免费领取XX福利哦！</p>',
        loading: false
      }
    },
    mounted () {
      this.open()
    },
    computed: {
      gameId () {
        if (this.$route.query.gameId) {
          return this.$route.query.gameId
        } else {
          return null
        }
      },
      qwUserId () {
        return this.$store.state.user.info.qwUserId
      }
    },
    methods: {
      open () {
        if (this.gameId) {
          this.getModel()
        } else {
          this.initModel()
          this.loading = true
        }
      },
      initModel () {
        this.model = {
          name: '',
          endTime: '',
            type: 'hylb',
          triggerKeyword: '',
          qwUserId: this.qwUserId,
          msgKeywordReply: '',
          stock: 4,
          posterElements: '{"header":{"visible":true,"circle":true,"x":-2,"y":-2,"size":148},"nickname":{"visible":true,"color":"#101010","size":18,"textAlign":"center","x":136,"y":14,"w":160,"h":79},"qrCode":{"visible":true,"w":null,"h":null,"x":495,"y":1088,"size":233}}   ',
          posterFileUrl: '',
          msgUnfollow: this.msgUnfollow,
          msgAfterFinish: this.msgJoin,
          msgReceiveHelp: this.msgReceiveHelp,
          msgHelp: this.msgJoin,
          msgGameOver: this.msgOver,
          msgRepeat: this.msgRepeat,
          overLimitMsg: this.overLimitMsg,
          msgGuideQw: this.msgGuideQw,
          /**
           * 奖励列表
           */
          rules: [{
            msgReward: this.msgReward,
            target: 2,
            level: 1,
            stock: 10,
            name: '一级阶梯'
          }],
          /**
           * 公众号列表
           */
          mps: [],
          /**
           * 裂变成员列表
           */
          members: []
        }
        this.visible = true
        const _this = this
        // 因为插件需要更改值来确保位置的准确性
        setTimeout(() => {
          _this.fixLoaded(this.model, 1)
        }, 100)
        setTimeout(() => {
          _this.fixLoaded(this.model)
        }, 300)
      },
      getModel () {
        API.getById({ gameTaskId: this.gameId, qwUserId: this.qwUserId }).then(res => {
          this.model = Object.assign({}, res)
          this.visible = true
          const _this = this
          setTimeout(() => {
            _this.fixLoaded(res, 1)
            this.initRules()
            this.initMsg()
          }, 500)
          setTimeout(() => {
            _this.fixLoaded(res)
          }, 1500)
          this.loading = true
        }).catch(err => {
          this.loading = true
          console.error(err)
        })
      },
      initMsg () {
        if (!this.model.msgKeywordReply) {
          this.model.msgKeywordReply = this.msgKeywordReply
        }
        if (!this.model.msgUnfollow) {
          this.model.msgUnfollow = this.msgUnfollow
        }
        if (!this.model.msgRepeat) {
          this.model.msgRepeat = this.msgRepeat
        }
        if (!this.model.overLimitMsg) {
          this.model.overLimitMsg = this.overLimitMsg
        }
        if (!this.model.msgAfterFinish) {
          this.model.msgAfterFinish = this.msgAfterFinish
        }
        if (!this.model.msgOver) {
          this.model.msgOver = this.msgOver
        }
      },
      initRules () {
        this.model.rules.forEach(item => {
          // if (!item.finishMsg) {
          //   item.finishMsg = this.finishMsg
          // }
          if (!item.msgReward) {
            item.msgReward = this.msgReward
          }
          // if (!item.receiveHelpMsg) {
          //   item.receiveHelpMsg = this.receiveHelpMsg
          // }
        })
      },
      prev () {
        try {
          // this.checkStep(this.step)
          this.step = (this.step + 3) % this.stepLength
        } catch (e) {
          this.$message.error(e.message)
        }
      },
      next () {
        try {
          // this.checkStep(this.step)
          this.step = (this.step + 1) % this.stepLength
        } catch (e) {
          this.$message.error(e.message)
        }
      },
      loaded (model) {
        for (let i = 0; i < this.stepLength; i++) {
          const stepRef = 'step' + i
          if (this.$refs[stepRef].loaded) {
            // 如果子组件定义了loaded，就调用
            this.$refs[stepRef].loaded(model)
          }
        }
      },
      fixLoaded (model, temp) {
        for (let i = 0; i < this.stepLength; i++) {
          const stepRef = 'step' + i
          if (this.$refs[stepRef].loaded) {
            // 如果子组件定义了loaded，就调用
            this.$refs[stepRef].fixLoaded(model, temp)
          }
        }
      },
      checkStep (step) {
        const stepRef = 'step' + step
        this.$refs[stepRef].check()
      },
      back () {
        this.$router.push({
          path: '/qywx/lbhk/hylb'
        })
      },
      save () {
        // 保存之前从当前位置逐条判断是否可以保存，先判断当前，然后判断123456, 有错误就打断
        try {
          // this.checkStep(this.step)
          for (let i = 0; i < this.stepLength; i++) {
            this.checkStep(i)
          }
        } catch (e) {
          this.$message.error(e.message)
          return
        }
        if (this.saveLoading) {
          return
        }
        this.saveLoading = true
        API.saveGame(this.model).then(res => {
          this.model.version = res.version
          this.model.id = res.id
          if (res) {
            this.saveLoading = false
            this.$confirm({
              title: '提示',
              content: '保存成功, 是否返回列表?',
              okText: '返回列表',
              cancelText: '继续编辑',
              iconType: 'check-circle',
              onOk: () => {
                this.back()
              }
            })
          }
        }).catch(err => {
          this.saveLoading = false
          console.log(err.msg)
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .hdgl-edit {
    min-height: 100%;
    min-width: 900px;
    display: flex;
    flex-direction: column;
    padding: 0 10px 50px;
    background: white;

    .hdgl-edit-step-list {
      flex-grow: 1;
      margin-top: 8px;
    }

    .operator-btn-list {
      position: fixed;
      left: 256px;
      width: 100%;
      bottom: 0;
      background: white;
      z-index: 100;

      .operator-btn-content {
        width: 900px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 -1px 0px 0px #eee;
      }
    }
  }
</style>
